<!-- 巡检任务 list -->
<template>
	<el-card shadow="hover">
		<el-row>
			<el-form :inline="true" :model="data.queryParams" class="demo-form-inline">
				<el-form-item label="任务">
					<el-input v-model="data.queryParams.taskId" placeholder="任务ID" size="default" clearable style="width: 150px" />
				</el-form-item>

				<!-- <el-form-item label="巡检次数">
					<el-input-number v-model="data.queryParams.checkTimes" placeholder="巡检次数" size="default" :min="0" :max="3" clearable style="width: 150px" />
				</el-form-item> -->

				<el-form-item label="完成状态">
					<el-select v-model="data.queryParams.isFinish" placeholder="状态" style="width: 150px">
						<el-option label="全部" :value="0" />
						<el-option label="完成" :value="1" />
						<el-option label="进行中" :value="2" />
					</el-select>
				</el-form-item>

				<el-form-item label="">
					<el-button type="primary" @click="search" size="default"> 查询 </el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<!-- 表格数据展示 -->
		<el-table ref="table" v-loading="data.loading" :data="data.tableData.list" border fit style="width: 100%" height="calc(100vh - 330px)">
			<el-table-column align="center" type="index" width="50px" />
			<el-table-column label="任务" prop="taskId" />
			<el-table-column label="任务类型">
				<template #default="{ row }">
					{{ row.taskType == 'getImg' ? '自动巡检' : row.taskType }}
				</template>
			</el-table-column>
			<el-table-column label="设备数量" prop="deviceNumber" />
			<el-table-column label="巡检次数" prop="checkTimes" />
			<el-table-column label="是否结束" prop="isFinish">
				<template #default="{ row }">
					<el-tag type="success" v-if="row.isFinish == 1">结束</el-tag>
					<el-tag type="warning" v-else>未结束</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="报告" prop="remark" width="350px" />
			<el-table-column label="完成时间" prop="createdAt" />
		</el-table>

		<!-- 查看日志对话框 -->

		<!-- 分页 -->
		<pagination :total="data.tableData.total" v-model:page="data.queryParams.pageNum" v-model:limit="data.queryParams.pageSize" @pagination="fetch" />
	</el-card>
</template>

<script lang="ts" setup name="AutoCheckList">
import { reactive, onMounted, ref, watch, onUpdated } from 'vue';
import autoCheckApi from '/@/api/smoke/autoCheck';
const data = reactive({
	queryParams: {
		taskId: '',
		checkTimes: '',
		isFinish: 0,
		pageNum: 1,
		pageSize: 10,
	},
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
});

onMounted(() => {
	fetch();
});

function search() {
	data.queryParams.pageNum = 1;
	fetch();
}

// 获取列表页数据
function fetch(params?: any) {
	data.loading = true;
	autoCheckApi
		.listPage(data.queryParams)
		.then((res: any) => {
			data.tableData = res.data;
			data.loading = false;
		})
		.finally(() => (data.loading = false));
}
</script>
<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
	margin-right: 10px;
}
</style>
